<html class="pixel-ratio-1">

    <head>
        <title>嘛香</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
        <link rel="stylesheet" href="/static/lib/weui.min.css">
        <link rel="stylesheet" href="/static/css/jquery-weui.css">
        <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
        <style>
            /*下拉图标位置*/
            .layui-edge {
                left: 70px;
            !important;
            }

            .layui-form-select .layui-input {
                padding-right: 0px;
            !important;
                height: 20px;
            !important;
                width: 85px;
            !important;
                border: 0;
            !important;
            }

            .layui-form-select dl {
                top: 20px;
            !important;

            }

            .layui-form-select dl dd.layui-select-tips {
                color: #000000;
            !important;
            }

            .layui-form-select dl dd.layui-this {
                background-color: #FFFFFF;
            !important;
                color: #FF9F35;
            !important;
            }

            /*字体 标题*/
            .body {
                font-family: "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei", 华文细黑, STHeiti, MingLiu
            }

            .pyq-content {
                position: relative;
                overflow: auto;
                clear: both;
                height: 600px;
            }


        </style>
    </head>
    <body ontouchstart="" class="weui-pull-to-refresh layui-form body">
        <div class="weui-tab__bd">
            <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                <!--下拉刷新-->
                <div style="height: 20px;width: 30px;margin: 0 auto" class="weui-pull-to-refresh__layer">
                    <div class="circle-wrap">
                        <div id="circle" class="circle" style="border-radius: 100%"></div>
                    </div>
                    <div class="status">
                        <div class="down"></div>
                        <div class="up"></div>
                        <div class="refresh"></div>
                    </div>
                </div>
                <!-- 搜索框 -->
                <div style="margin-top:10px;" class="weui-search-bar" id="searchBar">
                    <form class="weui-search-bar__form">
                        <div class="weui-search-bar__box">
                            <i class="weui-icon-search"></i>
                            <input type="search" class="weui-search-bar__input" id="searchInput"
                                   placeholder="请输入商家或商品名称" required="">
                            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                        </div>
                        <label class="weui-search-bar__label" id="searchText">
                            <i class="weui-icon-search"></i>
                            <span>请输入商家或商品名称</span>
                        </label>
                    </form>
                    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                </div>
                <!--手机轮播图-->
                <div class="swiper-container swiper-container-horizontal" style="margin: 5px 5px !important;height: 211px;border-radius: 15px;">
                    <!-- 类封装 -->
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4"
                             style="width: 320px;">
                            <img src="/static/images/food/1.jpg">
                        </div>
                        <!--轮播图片 -->
                        <div class="swiper-slide " data-swiper-slide-index="0" style="width: 320px;">
                            <img height="211px" width="100%" src="/static/images/food/1.jpg"></div>
                        <div class="swiper-slide" data-swiper-slide-index="1" style="width: 320px;">
                            <img height="211px" width="100%" src="/static/images/food/2.jpg"></div>
                        <div class="swiper-slide " data-swiper-slide-index="2" style="width: 320px;">
                            <img height="211px" width="100%" src="/static/images/food/3.jpg"></div>
                        <div class="swiper-slide " data-swiper-slide-index="3" style="width: 320px;">
                            <img height="211px" width="100%" src="/static/images/food/4.jpg">
                        </div>
                    </div>
                    <!-- 如果我需要分页 -->
                    <div class="swiper-pagination swiper-pagination-bullets">
                        <span class="swiper-pagination-bullet"></span>
                        <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                        <span class="swiper-pagination-bullet"></span>
                    </div>
                </div>

                <!-- 范围 -->
                <div id="shop-type" style="padding:15px 10%;">
                    <!--图库 店铺展示-->
                    <div class="weui-flex ">

                    </div>
                </div>
                <!-- 附近商家 -->
                <h3 style="margin: 0 0 0 5px">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>附近商家</legend>
                    </fieldset>
                </h3>
                <!--下拉框分类-->
                <div class="weui-flex" style="height: 30px;margin: 10px">
                    <div class="weui-flex__item"
                         style="display: inline-block">
                        <select name="sort" lay-verify="">
                            <option value="">综合排序</option>
                            <option value="010">销量优先</option>
                            <option value="021">评分优先</option>
                        </select>
                    </div>
                    <div class="weui-flex__item"
                         style="display: inline-block">
                        <select name="sort" lay-verify="">
                            <option value="">店铺品类</option>
                            <option value="010">销量优先</option>
                            <option value="021">评分优先</option>
                        </select>
                    </div>
                    <div style="display: inline-block">
                        <select name="sort" lay-verify="">
                            <option value="">全部筛选</option>
                            <option value="010">销量优先</option>
                            <option value="021">评分优先</option>
                        </select>
                    </div>
                </div>

                <!--店铺数据展示-->
                <div id="shopDate" style="padding:0 1%; " class="layui-row model-list">
                    <ul class="flow-default  pyq-content" id="shopInfo" style="overflow:auto"></ul>
                </div>
            </div>

        </div>
        <!-- 底部导航 -->
        <div   class="weui-tabbar" style="position:fixed;bottom: 0" >

        </div>
        <script type='text/javascript' src="/static/lib/jquery-2.1.4.js"></script>
        <script type='text/javascript' src="/static/lib/fastclick.js"></script>
        <script type='text/javascript' src="/static/js/jquery-weui.js"></script>
        <script type='text/javascript' src="/static/layui/layui.js"></script>
        <!--轮播图-->
        <script type='text/javascript' src="/static/js/swiper.js"></script>
        <!--底部导航-->
        <script src="/static/js/baseJs/base.js"></script>
        <script>
            $(document.body).infinite(100);

            function fun(result) {
                console.log("已经登录")
            }

            initAjax('/index/inspection', 'post', '', 'json', fun);

            //初始化加载店铺种类
            function shop_Type_Init() {
                $.getJSON(
                    '/shopType/kindAll'
                    , function (data) {
                        var shopTypeStr = '<div class="weui-flex"> ';
                        for (let index in data) {
                            if (index == data.length - 1) {
                                //最后一个
                                shopTypeStr +=
                                    '<div  style="display:inline-block;height: 32px;width: 32px" > ' +
                                    '    <img src=' + data[index].shopTypeImgurl + '> ' +
                                    '    <p style="font-size:11px;padding-left: 5px;">' + data[index].shopTypeName + '</p> ' +
                                    '</div>'
                                break;
                            }
                            //店铺种类字符串
                            shopTypeStr +=
                                '<div class="weui-flex__item" style="padding-right: 25px;height: 32px;width: 32px;"> ' +
                                '    <img src=' + data[index].shopTypeImgurl + '> ' +
                                '    <p style="font-size:11px;padding-left: 5px;">' + data[index].shopTypeName + '</p> ' +
                                '</div>'
                        }
                        shopTypeStr += '</div>'
                        $('#shop-type').html(shopTypeStr)
                    }
                )
            }
            //店铺数据
            function showShopDate() {
                var showDate = ""
                /*店铺*/
                for (let i = 0; i < 15; i++) {
                    showDate +=
                        '<div style="padding: 5px 0" class="layui-col-sm12 layui-col-md4">' +
                        '    <!--卡片主体-->' +
                        '    <div class="layui-panel" style="border-radius: 10px;">' +
                        '        <div style="padding: 5px;">' +
                        '            <!--店铺图片logo-->' +
                        '            <img style="width: 60px;height: 45px;border-radius: 8px;margin:0 0 10px 10px"' +
                        '                 src="/static/images/ToolIoc/默认店铺.png">' +
                        '            <div style="margin: 0 5px 5px 5px;display: inline-block">' +
                        '                <div style="font-family: 微软雅黑,黑体;font-weight: 900;">德克士</div>' +
                        '                <div style="line-height: 20px">' +
                        '                    <img src="/static/images/ToolIoc/xing.png" height="16" width="16"' +
                        '                         style="margin-bottom: 5px">' +
                        '                    <span style="color: #FE9720;font-size: 14px; margin-top: 5px">4.7</span>' +
                        '                    <span style="font-size: 6px;color: #73797C;  margin-top: 10px"> 月销100</span>' +
                        '                </div>' +
                        '            </div>' +
                        '        </div>' +
                        '    </div>' +
                        '</div>';
                }
                $('#shopDate').html(
                    showDate
                )
            }

            /*刷新*/
            $(document.body).pullToRefresh({
                distance: 80,
                onRefresh: function () {
                    setTimeout(function () {
                        //初始化加载店铺类型
                        shop_Type_Init();
                        //加载店铺
                        /*回调*/
                        $(document.body).pullToRefreshDone();
                    }, 1000);
                },
                onPull: function (percent) {
                    if (percent > 100) percent = 100
                    $circle.html(
                        '<span style="color: #fff">' +
                        percent +
                        '</span>'
                    );
                    $circle.css('background-image', 'linear-gradient(0deg, #FE9720 ' + percent + '%, #FE9720 ' + percent + '%, transparent 50%, transparent 100%)')
                }
            })
            var $circle = $("#circle")

            //初始化加载
            $(function () {
                FastClick.attach(document.body);
                //初始化加载店铺类型
                shop_Type_Init();
                //初始化加载附近店铺

                /*滚动*/
                $(".swiper-container").swiper({
                    loop: true//是否开启滑动
                    , autoplayDisableOnInteraction: false//拖拽之后依旧滑动
                    , autoplay: 4000//滑动时间
                    , items: [//默认加载 图片
                        '/static/images/food/3.jpg'
                    ]
                });
            });
            //点击店铺调用
            function getShop(obj) {
                var shopName = $($(obj).find('div')[2]);
                var logId = $($(obj).find('span')[2]);
                var shopId = $($(obj).find('span')[3]);
                //店铺登录ID 店家
                console.log(logId.html())
                console.log(shopId.html())
                //店铺名称
                console.log(shopName.html())
                location = '/shopInfo/'+shopId.html()+''
            }
        </script>
        <!--layui-->
        <script>
            layui.use(['dropdown', 'util', 'layer', 'carousel'], function () {
                var dropdown = layui.dropdown
                    , util = layui.util
                    , layer = layui.layer
                    , $ = layui.jquery
                    , carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#roll'
                    , width: '100%' //设置容器宽度
                    , height: '211px'
                    , arrow: 'always' //始终显示箭头
                });
            });
            /*流加载*/
            layui.use('flow', function () {
                var flow = layui.flow,
                    $ = layui.jquery;
                flowLoad();
            function flowLoad(){
                flow.load({
                    elem: '#shopInfo', //流加载容器
                    scrollElem: '#shopInfo', //滚动条所在元素，一般不用填
                    mb: 200,
                    isLazyimg: true,
                    isAuto: true,
                    done: function (page, next) { //执行下一页的回调
                        //模拟数据插入
                        setTimeout(function () {
                            var lis = [];
                            //数据请求地址，page，第几页，默认page是从2开始返回
                            $.post('/shop/findShopAll', {page: page}, function (res) {
                                layui.each(res.data, function (index, item) {
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    lis.push(
                                        '<div style="padding: 5px 0" class="layui-col-sm12 layui-col-md4">' +
                                        '    <!--卡片主体-->' +
                                        '    <div class="layui-panel" style="border-radius: 10px;" onclick="getShop(this)">' +
                                        '        <div style="padding: 5px;">' +
                                        '            <!--店铺图片logo-->' +
                                        '            <img style="width: 60px;height: 45px;border-radius: 8px;margin:0 0 10px 10px"' +
                                        '                 lay-src=' + item.shopImgeUrl + '>' +
                                        '            <div style="margin: 0 5px 5px 5px;display: inline-block">' +
                                        '                <div style="font-family: 微软雅黑,黑体;font-weight: 900;">' + item.shopName + '</div>' +
                                        '                <div style="line-height: 20px">' +
                                        '                    <img src="/static/images/ToolIoc/xing.png" height="16" width="16"' +
                                        '                         style="margin-bottom: 5px">' +
                                        '                    <span style="color: #FE9720;font-size: 14px; margin-top: 5px">' + item.shopEvaluate + '</span>' +
                                        '                    <span style="font-size: 6px;color: #73797C;  margin-top: 10px"> 月销100</span>' +
                                        '                    <span style="font-size: 6px;color: #73797C;display: none">'+item.logId+'</span>'+
                                        '                    <span style="font-size: 6px;color: #73797C;display: none">'+item.shopId+'</span>'+
                                        '                </div>' +
                                        '            </div>' +
                                        '        </div>' +
                                        '    </div>' +
                                        '</div>');
                                });
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < res.pages); //假设总页数为 10
                            });
                        });
                    }
                });
            }
            });
        </script>
    </body>

</html>